<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM间接操作css</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        var oDiv = document.getElementsByTagName('div')[0];
        // Element.style.xxx  
        // 1.是可读可写的，
        // 2.值是字符串，
        // 3.复合值要拆解赋值
        // 4.保留字前面加css

        //获取不到css上的属性，只能获取行间样式
        console.log(oDiv.style.width);
        oDiv.style.width = '300px';
        console.log(oDiv.style.width);
        //使用小驼峰，链接两个单词
        oDiv.style.backgroundColor = 'black';
        // 保留字前面加css
        oDiv.style.cssFloat = 'left'
        // window.getComputedStyle(elem,null); 
        // window.getComputedStyle(elem,'after');null这个位置填伪元素，
        //  获取当前元素的所有原始值和显示值，显示的是绝对值
        // elem.currentStyle  ie8以下兼容
        //兼容方法
        function getStyle(elem,prop) {
            if (window.getComputedStyle) {
                if(prop){
                    return window.getComputedStyle(elem,null)[prop]
                }else{
                    return window.getComputedStyle(elem,null)
                }
            }else{
                if (prop) {
                    return elem.currentStyle[prop];
                }else{
                    return elem.currentStyle
                }
            }
        }
        // offsetWidth/offsetHeight 不建议使用
        
    </script>
</body>

</html>